<template>
  <view class="smart-container">
    <view class="header">
      <text class="title">智造中心</text>
      <text class="workshop-name">{{ workshopName }}</text>
    </view>

    <view class="overview-cards">
      <view class="card">
        <text class="card-number">{{ todayOverview.productionCount }}</text>
        <text class="card-label">今日产量</text>
      </view>
      <view class="card">
        <text class="card-number">{{ todayOverview.qualityRate }}%</text>
        <text class="card-label">一次投兑率</text>
      </view>
      <view class="card">
        <text class="card-number">{{ todayOverview.equipmentCount }}</text>
        <text class="card-label">设备在线</text>
      </view>
    </view>

    <view class="module-list">
      <view class="module-section">
        <text class="module-title">核心功能模块</text>
      </view>
      <view class="card-grid">
        <view
          :class="['dopamine-card', menu.class]"
          v-for="menu in allowedMenus"
          :key="menu.title"
          @tap="navigateTo(menu.path)"
        >
          <view class="card-icon-wrapper">
            <image
              class="module-icon"
              :src="menu.icon"
              mode="aspectFit"
            ></image>
          </view>
          <text class="card-title">{{ menu.title }}</text>
          <text class="card-desc">{{ menu.desc }}</text>
        </view>
      </view>

      <view class="task-list">
        <view class="module-section">
          <text class="module-title">今日任务</text>
        </view>
        <view
          class="task-item"
          v-for="(task, index) in todayTasks"
          :key="index"
        >
          <view class="task-info">
            <text class="task-name">{{ task.name }}</text>
            <text class="task-time">{{ task.time }}</text>
          </view>
          <view class="task-status" :class="task.status">
            {{ task.statusText }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      workshopName: "",
      todayOverview: {
        productionCount: 0,
        qualityRate: 100,
        equipmentCount: 0,
      },
      todayTasks: [
        {
          name: "早班生产计划",
          time: "08:00-12:00",
          status: "processing",
          statusText: "进行中",
        },
        {
          name: "设备点检",
          time: "09:00-10:00",
          status: "completed",
          statusText: "已完成",
        },
      ],
      // 静态菜单数组
      staticMenus: [
        {
          matchTitle: "APP-采购仓库作业",
          title: "采购仓库作业",
          path: "warehouse",
          icon: "/static/icons-modern/warehouse.svg",
          desc: "原料库、备件库、五金库实时管控",
        },
        {
          matchTitle: "APP-半成品仓库作业",
          title: "半成品仓库作业",
          path: "warehouse/02semi",
          icon: "/static/icons-modern/warehouse.svg",
          desc: "三相、提纯、粗丝、细丝半成品库实时管控",
        },
        {
          matchTitle: "APP-在制品仓库作业",
          title: "在制品仓库作业",
          path: "warehouse",
          icon: "/static/icons-modern/warehouse.svg",
          desc: "粗丝、细丝在制品库实时管控",
        },
        {
          matchTitle: "APP-成品仓库作业",
          title: "成品仓库作业",
          path: "warehouse/01prod",
          icon: "/static/icons-modern/warehouse.svg",
          desc: "粗丝、细丝成品库实时管控",
        },
        {
          matchTitle: "APP-质检作业",
          title: "质检作业",
          path: "05qmRecord",
          icon: "/static/icons-modern/plan.svg",
          desc: "全面质量追溯",
        },
        {
          matchTitle: "APP-炼轧生产",
          title: "炼轧生产",
          path: "01lzRecord",
          icon: "/static/icons-modern/production.svg",
          desc: "生产物流全流程监控",
        },
        {
          matchTitle: "APP-粗丝生产",
          title: "粗丝生产",
          path: "02csRecord",
          icon: "/static/icons-modern/production.svg",
          desc: "生产物流全流程监控",
        },
        {
          matchTitle: "APP-细丝生产",
          title: "细丝生产",
          path: "03xsRecord",
          icon: "/static/icons-modern/production.svg",
          desc: "生产物流全流程监控",
        },
        {
          matchTitle: "APP-冷轧生产",
          title: "冷轧生产",
          path: "04lzRecord",
          icon: "/static/icons-modern/production.svg",
          desc: "生产物流全流程监控",
        },
        {
          matchTitle: "APP-设备作业",
          title: "设备作业",
          path: "equipment",
          icon: "/static/icons-modern/equipment.svg",
          desc: "设备全生命周期管理",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["permissions", "menus"]),
    allowedMenus() {
      // 获取动态菜单数据，如果菜单不存在则默认空数组
      const dynamicMenus = this.menus || [];
      // 先筛选出动态菜单中的顶级菜单项（parentId=0）
      const matchedMenus = dynamicMenus.filter(
        (dynamicMenu) => dynamicMenu.parentId === 0
      );
      // 筛选出静态路由与动态路由匹配的项，返回静态路由信息
      const filteredMenus = this.staticMenus.filter((staticMenu) =>
        matchedMenus.some(
          (dynamicMenu) => dynamicMenu.name === staticMenu.matchTitle
        )
      );
      console.log("filteredMenus", filteredMenus);
      return filteredMenus;
    },
  },
  onLoad() {
    this.initWorkshopName();
  },

  methods: {
    initWorkshopName() {
      try {
        // 从Vuex获取用户配置信息
        const userConfig = this.$store.state.user.userConfig || {};
        const workInfo = this.$store.state.user.workInfo || {};

        // 从用户配置获取工序名称，支持多种字段格式
        let processName = "";
        if (userConfig.processName) {
          processName = userConfig.processName;
        } else if (userConfig.process_name) {
          processName = userConfig.process_name;
        } else if (workInfo.processName) {
          processName = workInfo.processName;
        } else if (workInfo.process_name) {
          processName = workInfo.process_name;
        } else if (workInfo.process) {
          processName = workInfo.process;
        } else if (userConfig.process) {
          processName = userConfig.process;
        }

        if (processName) {
          this.workshopName = processName;
        } else {
          // 如果没有获取到工序名称，使用默认值
          this.workshopName = "轧钢车间";
        }
      } catch (error) {
        console.error("获取工序名称失败:", error);
        this.workshopName = "轧钢车间";
      }
    },

    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/smart/${page}/index`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.smart-container {
  padding: 20rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.workshop-name {
  font-size: 28rpx;
  color: #666;
  background-color: #e6f7ff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.overview-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.card {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
  flex: 1;
  margin: 0 10rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.card-number {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 10rpx;
}

.card-label {
  font-size: 24rpx;
  color: #666;
}

.module-list {
  margin-bottom: 30rpx;
}

.module-section {
  text-align: center;
  margin-bottom: 30rpx;
}

.module-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
  position: relative;
  display: inline-block;
  padding: 0 40rpx;
}

.module-title::before,
.module-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rpx;
  height: 2rpx;
  background-color: #e0e0e0;
  transform: translateY(-50%);
}

.module-title::before {
  left: 0;
}

.module-title::after {
  right: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 10rpx;
}

.dopamine-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &:active {
    transform: scale(0.95);
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8rpx;
    border-radius: 24rpx 24rpx 0 0;
  }
}

.card-plan {
  &::before {
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
  }
  background: linear-gradient(135deg, #fff5f5, #ffe8e8);
}

.card-warehouse {
  &::before {
    background: linear-gradient(90deg, #4ecdc4, #7fdbda);
  }
  background: linear-gradient(135deg, #f0fffe, #e6faf9);
}

.card-material {
  &::before {
    background: linear-gradient(90deg, #45b7d1, #74c7ec);
  }
  background: linear-gradient(135deg, #f0f9ff, #e6f4ff);
}

.card-quality {
  &::before {
    background: linear-gradient(90deg, #96ceb4, #b8e6c1);
  }
  background: linear-gradient(135deg, #f5fff8, #e8f9ef);
}

.card-production {
  &::before {
    background: linear-gradient(90deg, #feca57, #ffd93d);
  }
  background: linear-gradient(135deg, #fffdf0, #fffbe6);
}

.card-equipment {
  &::before {
    background: linear-gradient(90deg, #ff9ff3, #f368e0);
  }
  background: linear-gradient(135deg, #fff5fe, #ffe8fc);
}

.card-energy {
  &::before {
    background: linear-gradient(90deg, #54a0ff, #74b9ff);
  }
  background: linear-gradient(135deg, #f0f7ff, #e6f2ff);
}

.card-safety {
  &::before {
    background: linear-gradient(90deg, #5f27cd, #8b5cf6);
  }
  background: linear-gradient(135deg, #f5f0ff, #f0ebff);
}

.card-icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  margin: 0 auto 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10rpx);
}

.module-icon {
  width: 50rpx;
  height: 50rpx;
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8rpx;
  display: block;
}

.card-desc {
  font-size: 22rpx;
  color: #7f8c8d;
  display: block;
}

.module-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border-left: 6rpx solid #2e7cf6;
}

.module-item:active {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.module-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  filter: none;
}

.module-name {
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: 500;
}

.task-list {
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border-left: 6rpx solid #52c41a;
}

.task-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.task-info {
  flex: 1;
}

.task-name {
  display: block;
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.task-time {
  font-size: 24rpx;
  color: #666666;
}

.task-status {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.task-status.processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.task-status.completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.task-status.pending {
  background-color: #fff7e6;
  color: #fa8c16;
}
</style>
